 <!--
* description: 搜索选择（含输入框）
* author: wangml
* createdDate: 2020-12-23
-->
<template>
  <section class="cartypeQuery">
    <el-dialog
      id="cartypeq"
      v-dialogDrag
      :title="curtitle"
      :visible.sync="popupsVisible"
      width="70%"
      center
      :append-to-body="true"
      :lock-scroll="true"
      :before-close="handleClose"
    >
      <dialogHeader
        slot="title"
        :title="curtitle"
        :style-type="$store.state.app.dialogType"
      />
      <one-table-template
        ref="multipleTable"
        :dynamic-api-config="dynamicApiConfig"
        :dynamic-buttons="dynamicButtons"
        :dynamic-components="tableComponents"
        :dynamic-table-cols="dynamicTableCols"
        :dynamic-form-fields="formField"
        :dynamic-table-defult-height="350"
        :dynamic-is-show-more-btn="true"
        :dynamic-is-show-select="showSelect"
        :dynamic-api-style="apiStyle"
        :refresh-table-key="refreshTableKey"
        :callback-obj="callbackObj"
        @hiddenColData="hiddenColData"
      />

    </el-dialog>
  </section>
</template>
<script>
import { oneTableWithViewTemplateMixins } from '@/components/mixins/oneTableWithViewTemplateMixins'
import OneTableTemplate from '@/components/templates/oneTable'
import Vue from 'vue'

export default {
  name: 'MultipleDialog',
  components: {
    dialogHeader: () => import('@/components/dialogHeader'), // 弹窗标题,
    OneTableTemplate
  },
  mixins: [oneTableWithViewTemplateMixins],
  props: {
    title: { type: String, default: '搜索选择' },
    popupsVisible: { type: Boolean, default: false },
    code: { type: String, default: '' },
    comType: { type: String, default: '' },
    codeField: { type: String, default: '' },
    popupsKey: { type: String, default: '' },
    isMul: { type: Boolean, default: true },
    validrule: {
      type: Object,
      default: () => {}
    }
  },
  beforeRouteEnter(to, from, next) {
    Vue.prototype.$ConfigCache.CacheConfig.initData(
      // 同时加载当前页面和编辑框页面的配置
      [to.path, ''],
      function() {
        next()
      })
  },
  data() {
    const viewPageCode = this.$route.path
    // 绑定事件配置化事件
    this.$ConfigCache.CacheConfig.bindEvent(this, [viewPageCode])
    return {
      showSelect: false,
      table: null,
      curSelected: null,
      selectData: {},
      clickRowsData: {},
      dynamicApiConfig: this.$attrs['value-object'].api,
      apiStyle: 'restful',
      dynamicButtons: this.$ConfigCache.CacheConfig.cacheData[viewPageCode] &&
      this.$ConfigCache.CacheConfig.cacheData[viewPageCode].tableButtons &&
      this.$ConfigCache.CacheConfig.cacheData[viewPageCode].tableButtons.length > 0
        ? this.$ConfigCache.CacheConfig.cacheData[viewPageCode].tableButtons
        : [
          {
            compKey: 'btnKey1',
            type: 'primary',
            size: 'small',
            name: 'search',
            clickEvent: () => this.queryTable(1),
            position: 'component',
            text: '查询'
          },
          {
            compKey: 'btnKey2',
            type: '',
            size: 'small',
            name: 'reset',
            clickEvent: this.reset,
            position: 'component',
            text: '重置'
          }

        ],

      tableComponents:
        this.$ConfigCache.CacheConfig.cacheData[viewPageCode] &&
        this.$ConfigCache.CacheConfig.cacheData[viewPageCode].tableComponents.length > 0
          ? this.$ConfigCache.CacheConfig.cacheData[viewPageCode].tableComponents
          : this.$attrs['value-object'].tableComponents,
      dynamicTableCols: this.$ConfigCache.CacheConfig.cacheData[viewPageCode] &&
      this.$ConfigCache.CacheConfig.cacheData[viewPageCode].tableCols.length > 0
        ? this.$ConfigCache.CacheConfig.cacheData[viewPageCode].tableCols
        : [
          {
            prop: 'releaseId',
            label: '主键ID',
            hidden: true,
            alwaysHidden: true
          },
          {
            prop: 'updateControlId',
            label: '并发控制ID',
            hidden: true,
            alwaysHidden: true
          },
          ...this.$attrs['value-object'].tableCols
        ],
      refreshTableKey: '0',
      ruleSettingShow: false,
      curPopupsVisible: this.popupsVisible,
      // 单表格模版页面组件回调事件
      callbackObj: {
        // 当选择项发生变化时会触发该事件（多选时）
        onCheckSelectChange: (selection) => {
          this.table === null ? this.foundTable() : ''
          this.handleOneSelect(selection)
          this.handleSelectionChange(selection)
        },
        onRowDbClick: (section) => {
          const reVal = this.$attrs['value-object'].returnField
          const val = section[reVal.prop[0]]
          this.$emit('update:popupsVisible', false)
          this.$parent.modelText = section
          this.$parent.modelCode = val
          // const h = this.$createElement
          // this.$msgbox({
          //   title: '确认选择',
          //   message: h('p', null, [
          //     h('span', null, `选择了${text}：`),
          //     h('span', { style: 'color: blue' }, val)
          //   ]),
          //   showCancelButton: true,
          //   confirmButtonText: '确定',
          //   cancelButtonText: '取消',
          //   beforeClose: (action, instance, done) => {
          //     if (action === 'confirm') {
          //       instance.confirmButtonLoading = true
          //       this.$emit('update:popupsVisible', false)
          //       this.$parent.modelText = section
          //       this.$parent.modelCode = val
          //       instance.confirmButtonLoading = false
          //       done()
          //     } else {
          //       done()
          //     }
          //   }
          // }).then(action => { })
        }
      },

      formField: this.$utils.getFormField(this, this.$attrs['value-object'].formField, this.$ConfigCache.CacheConfig.cacheData[viewPageCode])
    }
  },
  computed: {
    curtitle() {
      return this.title.substring(0, this.title.length - 1) + '选择'
    }
  },
  mounted() {
  },
  methods: {
    // 查找el-table表格组件
    foundTable() {
      this.$refs.multipleTable.$children.forEach(el => {
        el.$el.className.includes('el-table') ? this.table = el : ''
      })
    },
    // 返回数据处理
    sendCode() {
      // eslint-disable-next-line no-prototype-builtins
      if (this.selectData.hasOwnProperty('index')) {
        this.$parent.modelText = this.selectData.storeName
        this.$parent.modelCode = this.selectData.storeCode
        this.$emit('update:popupsVisible', false)
        this.table.toggleRowSelection(this.curSelected, false)
      } else {
        this.$message('还没有选择体验中心！')
      }
    },

    // 设置表格单选
    handleOneSelect(selection) {
      if (selection.length === 0) { this.selectData = {}; return }
      const lastIndex = selection.length - 1
      this.selectData = selection[lastIndex]
      selection.forEach((sel, idx) => {
        lastIndex !== idx ? this.table.toggleRowSelection(sel, false) : this.curSelected = sel
      })
    },
    handleSelectionChange(selection) {
      const btns = this.dynamicButtons.filter(o => o.disabled !== undefined)
      if (btns.length > 0) {
        const isCheck = selection && selection.length > 0
        btns.forEach((item) => {
          item.disabled = !isCheck
        })
      }
    },
    handleClose() {
      this.$emit('update:popupsVisible', false)
      this.table.toggleRowSelection(this.curSelected, false)
    },
    hiddenColData(data) {
      if (data && data.length > 0) {
        this.refreshTableKey += 1
        this.dynamicTableCols = data
      }
    }
  }
}
</script>

<style lang="css" scoped>
  >>>div.el-table__empty-block{
    height: 200px;
  }
  div.el-table__body-wrapper.is-scrolling-none{
    height: 200px;
  }
  >>>.el-table__header .el-checkbox{
    display:none
  }
  .dialog-footer {
    float: right;
  }
  >>>.el-dialog__footer {
    overflow: hidden;
    padding: 10px 24px;
  }
</style>
